<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>向导组件</title>
<link href="../../css/bootstrap.min.css" rel="stylesheet">
<link href="../../css/font-awesome.css" rel="stylesheet">
<link href="../../css/koala.css" rel="stylesheet">
<link href="../../css/koala_wizard.css" rel="stylesheet">
<script src="../../js/jquery.js" type="text/javascript"></script>
<script src="../../js/bootstrap.min.js" type="text/javascript" ></script>
<script src="../../js/Koala_Wizard.js" type="text/javascript" ></script>
<script type="text/javascript">
	$(function(){
		var wizard = $(".wizard").wizard();
	});
</script>
</head>
<body>
	<div id="main">
		<form action="#" method="post">
			<div class="wizard">
				<ul class="nav nav-tabs">
				  <li id="first-step" class="active"><a href="#">第一步</a></li>
				  <li id="second-step"><a href="#" >第二步</a></li>
				  <li id="last-step"><a href="#" >第三步</a></li>
				</ul>
		
				<div class="items">
					<div class="page">
		                <h4>创建一个账户<br/><em>请填写您的注册账户信息，用于登录。</em></h4>
						<p>
							 <label>用户名：</label>
							 <input type="text" class="form-control" name="userName" placeholder="输入6位以上字符">
						</p>
						<p>
							 <label>密码：</label>
							 <input type="password" class="form-control" name="password" placeholder="输入6到10位字符">
						</p>
						<p>
							  <label>确认密码：</label>
							  <input type="password" class="form-control" name="confirmPassword" placeholder="输入6到10位字符">
						</p>
		               <div class="btn_nav">
		                 	<button data-toggle="next" class="btn right btn-default">下一步&raquo;</button>
		               </div>
		            </div>
					<div class="page">
		                <h4>填写联系信息<br/><em>请告诉我们您的联系方式。</em></h4>
						<p>
							 <label>E-mail：</label>
							 <input type="text" class="form-control" name="email" placeholder="输入6位以上字符">
						</p>
						<p>
							 <label>QQ：</label>
							 <input type="text" class="form-control" name="qq" placeholder="输入6到10位字符">
						</p>
						<p>
							  <label>手机号码：</label>
							  <input type="text" class="form-control" name="phone" placeholder="输入6到10位字符">
						</p>
		               <div class="btn_nav">
		                   <button data-toggle="prev" class="left btn btn-default" >&laquo;上一步</button>
		               	   <button data-toggle="next" class="right btn btn-default" >下一步&raquo;</button>
		               </div>
		            </div>
					<div class="page">
		                 <h4>完成注册<br/><em>点击确定完成注册。</em></h4>
				         <h4>Helloweba欢迎您！</h4>
				         <p>请点击“确定”按钮完成注册。</p>
				          <br/>
				          <br/> 
				           <br/>
				          <br/> 
				           <br/>
				          <br/>   
		               <div class="btn_nav">
		               	  <button data-toggle="prev" class="left btn btn-default" >&laquo;上一步</button>
		               	  <button data-toggle="complete" class="right btn btn-success" id="sub">确定</button>
		               	  <button data-toggle="first" class="right btn btn-success" id="gofirst" pageId="second-step">第一页</button>
		               </div>
		            </div>
				</div>
			</div>
		</form>
	</div>
</body>
</html>